<template>
    <div class="p-20 d-flex between">
        <a-card title="个人资料卡" style="width: 30%; height: 710px;">
            <div class="w-100 h-200">
                <div style="width:100px; height: 100px; margin:0 auto;" class="avatar">
                    <img style="width:100%;height:100%;" class="border-r50" src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif" alt="">
                </div>
                <div class="userName text-center weight size-24 mt-10">{{userInfo.userName}}</div>
                <div class="edjor userName text-center">{{userInfo.job}}</div>
            </div>
            <a-list item-layout="horizontal" :data-source="cardData">
                <template #renderItem="{ item }">
                    <a-list-item>
                        <a-list-item-meta>
                            <template #title>
                                <cloud-server-outlined v-if="item.key === 'job'" />
                                <cluster-outlined v-if="item.key === 'skill'" />
                                <a class="ml-10 weight">{{ item.title }}</a>
                                <br>
                                <span class="ml-10 color">{{item.main}}</span>
                            </template>
                        </a-list-item-meta>
                    </a-list-item>
                </template>
            </a-list>
            <div class="progress p-10">
                    <div>
                        <a-tag color="processing">
                            <template #icon>
                                <sync-outlined :spin="true" />
                            </template>
                            劈瓜术
                        </a-tag>
                        <a-progress :percent="56" />
                    </div>
                    <div class="mt-15">
                        <a-tag color="success">
                            <template #icon>
                                <check-circle-outlined />
                            </template>
                            识瓜术
                        </a-tag>
                        <a-progress :percent="100" />
                    </div>
                    <div class="mt-15">
                        <a-tag color="processing">
                            <template #icon>
                                <sync-outlined :spin="true" />
                            </template>
                            车遁术
                        </a-tag>
                        <a-progress :percent="5" />
                    </div>
                    <div class="mt-15">
                        <a-tag color="processing">
                            <template #icon>
                                <sync-outlined :spin="true" />
                            </template>
                            禁止识别术
                        </a-tag>
                        <a-progress :percent="32" />
                    </div>
            </div>
        </a-card>
        <div class="tabs ml-10">
            <a-tabs class="cardsItem" v-model:activeKey="activeKey">
                <a-tab-pane key="1" tab="回复动态">
                    <Active />
                </a-tab-pane>
                <a-tab-pane key="2" tab="打卡时间">
                    <TimeLate />
                </a-tab-pane>
                <a-tab-pane key="3" tab="上线打卡">
                    <UpDate />
                </a-tab-pane>
            </a-tabs>
        </div>
    </div> 
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import Active from './components/Active.vue'
import TimeLate from './components/TimeLate.vue'
import UpDate from './components/UpDate.vue'
import { reactive, ref } from '@vue/reactivity'

const cardData = [{
    title: '工作经历',
    key: 'job',
    main: '曾于沃尔玛，佳佳，百信，红旗等超市担任过西瓜销售主管，多个西瓜项目的负责人，曾在阿里销售部卖过不保熟的西瓜'
}, {
    title: '职能技能',
    key: 'skill',
    main: '劈瓜，抓住人们的胃口劈各种瓜，精通卖西瓜刀技术，一眼可以看出是不是生瓜'
}]
export default defineComponent({
    components: {
        Active,
        TimeLate,
        UpDate
    },
    setup() {
        let userInfo = reactive({})
        
        userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
        return {
            userInfo,
            cardData,
            activeKey: ref('1')
        }
    },
})
</script>
<style lang="scss" scoped>
.avatar {
    border-radius: 50%;
}
.userName {
    line-height: 40px;
}
.color {
    color: #7b7d81;
}
.tabs {
    flex: 1;
}
.cardsItem {
    background-color: #fff;
    padding: 15px;
    box-sizing: border-box;
}
</style>
